<template>
  <div class="assetInfo">
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="扫描结果" name="first">
        <div class="info-box">
          <div id="qrcode" ref="qrcode"></div>
          <h5>IT固定资产</h5>
          <ul>
            <li>公司部门：{{ users.compName }} - {{ users.deptName }}</li>
            <li>资产编码：{{ info.assetCode }}</li>
            <li>硬件编号：{{ info.hardwareCode === '' ? '无' : info.hardwareCode }}</li>
            <li>名称：{{ info.assetName }}</li>
            <li>资产类型：{{ info.cateName }}</li>
            <li v-if="info.assetStatus === 1">
              状态：占用
            </li>
            <li v-if="info.assetStatus === 2">
              状态：空闲
            </li>
            <li v-if="info.assetStatus === 3">
              状态：维修
            </li>
            <li v-if="info.assetStatus === 4">
              状态：报废
            </li>
            <li v-if="info.assetStatus === 5">
              状态：停用
            </li>
            <li>责任人：{{ users.userName }} [{{ users.userId === '' ? '无' : users.userId }}]</li>
            <li>购买日期：{{ info.buyTime }}</li>
            <li>购买金额：￥{{ info.buyMoney }}元</li>
            <li><p>地址：{{ info.address }}</p></li>
            <li><p>备注说明：{{ info.note  === '' ? '无' : info.note }}</p></li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="second">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index">
            <ul>
              <li>
                处理人：{{activity.createUserId}}
              </li>
              <li>
                日期：{{ activity.createTime | filterTimes }}
              </li>
              <li>
                类型：{{activity.operation}}
              </li>
               <li>
                 <p>备注：{{activity.note}}</p>
              </li>
            </ul>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
// 引入时间格式化插件
import moment from 'moment';
export default {
  name: 'assetInfo',
  components: { QRCode },
  data () {
    return {
      imgUrl: '/static/images/logo.png',
      activeName: 'first',
      hrefUrl: window.location.href.substring(window.location.href.lastIndexOf('/') + 1, window.location.href.length),
      info: {},
      users: {},
      activities: []
    };
  },
  created () {
    this.getAssetInfo();
    this.getAssetCode();
  },
  // 过滤器
  filters: {
    filterTimes (value) {
      return moment(value).format('YYYY-MM-DD') === 'Invalid date' ? '' : moment(value).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  methods: {
    qrcode (link) {
      document.getElementById('qrcode').innerHTML = '';
      // eslint-disable-next-line no-unused-vars
      let qrcode = new QRCode('qrcode', {
        width: 100, // 设置宽度
        height: 100, // 设置高度
        text: link
      });
    },
    getAssetCode () {
      let _this = this;
      let url = window.location.href;
      _this.$nextTick(function () {
        _this.qrcode(url);
      });
    },
    getAssetInfo () {
      let _this = this;
      let params = {
        assetCode: _this.hrefUrl
      };
      console.log(params);
      _this.$http.post('api/findAssetInfos', params).then(res => {
        console.log(res);
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          _this.users = datas.users[0];
          _this.info = datas.assets;
          _this.activities = datas.recordList;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
